import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import constants from '../../utils/constants';
import { Flex, Button } from 'antd-mobile-rn';
import Icon from '../home/icon/iconfont';




export default class TaskAdd extends Component {


    navigationToEdit = (name) => {
        const { navigation } = this.props;
        navigation.navigate("TaskEdit", {
            name: name,
            back: () => {
                console.log("TaskAdd: edit back");
                const back = navigation.getParam("homeBack");
                if (back) {
                    back();
                }
            }
        });
    }


    render() {

        console.log("TaskAdd navigation:",this.props.navigation);


        return (

            <View style={{ flex: 1, padding: 20 }}>
                <View style={{ marginBottom: 25 }}>
                    <Text style={{ fontSize: 28, color: "#222", paddingLeft: 5 }}>推荐任务</Text>
                </View>
                {
                    [[
                        { icon: "touting", label: "听力" },
                        { icon: "shu", label: "阅读" },
                        { icon: "bi", label: "写作" },
                        { icon: "voice", label: "口语" },

                    ], [
                        { icon: "daibanshixiang", label: "剑桥雅思" },
                        { icon: "duihuan", label: "翻译" },
                        { icon: "headphone", label: "精听" },
                        { icon: "sort", label: "单词" },
                    ]].map((data, i) => {
                        return (
                            <Flex key={i} style={{ marginBottom: 20 }}>
                                {data.map((item, j) => {
                                    return (
                                        <Flex.Item key={"item-" + j} style={{ alignContent: "center", alignItems: "center" }}>
                                            <TouchableOpacity activeOpacity={0.6} onPress={() => {
                                                this.navigationToEdit(item.label);
                                            }}>
                                                <View style={{ backgroundColor: constants.themeColor, width: 45, height: 45, borderRadius: 5, alignContent: "center", alignItems: "center", marginBottom: 10 }}>
                                                    <Icon name={item.icon} size={25} color={"#fff"} style={{ marginTop: 10 }}></Icon>
                                                </View>
                                            </TouchableOpacity>
                                            <Text style={{ color: "#666" }}>{item.label}</Text>
                                        </Flex.Item>
                                    )
                                })}
                            </Flex>
                        )
                    })
                }
                <View style={{ alignItems: "center", flex: 1, marginTop: 100 }}>
                    <Button
                        onClick={() => {
                            this.navigationToEdit("");

                        }}
                        type={"primary"}
                        activeStyle={{ backgroundColor: "#fff", borderColor: constants.themeColor }}
                        style={{ width: 250, borderRadius: 15, backgroundColor: "#fff", borderColor: constants.themeColor }}
                    >
                        <Icon name={"iconfontadd"} size={18} color={constants.themeColor}></Icon>
                        <Text style={{ fontSize: 18, color: constants.themeColor }} > 自定义任务 </Text>
                    </Button>
                </View>
            </View>
        )

    }
}